<template>
	<view class="main">
		<view class="hand">
			<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//dbleft.png" @click="blackbtn"></image>
			用户详情
		</view>
		<view class="show">
			<view class="sone">
				<view class="sonetap">
					<view class="stapone">
						<view class="staponeleft">{{list.projectName}}</view>
						<view class="staponeright" @click="xgbtn">
							<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//xiugai.png"></image>
						</view>
					</view>
					<view class="staptwo">
						<view class="staptwoleft">用户姓名：{{list.realName}}</view>
						<view class="staptworight">基本账户：{{list.realBalance}} 元</view>
					</view>
					<view class="staptwo">
						<view class="staptwoleft">用户编号：{{list.id}}</view>
						<view class="staptworight">赠送账户：{{list.dummyBalance}} 元</view>
					</view>
					<view class="staptwo">
						<view class="staptwoleft">包月期限：<span v-if="list.endTime">{{list.endTime}}</span>
						<span v-else>无</span></view>
						<view class="staptworight" v-show="list.monthlyType=='A1'||list.monthlyType=='A3'||list.monthlyType=='A4'||list.monthlyType=='A6'">剩余：
							<span v-if="list.monthlyType=='A1'||list.monthlyType=='A4'">{{list.num}}小时</span>
							<span v-else-if="list.monthlyType=='A3'||list.monthlyType=='A6'">{{list.num}}次</span>
							<span v-else>0</span>
						</view>
						<view class="staptworight" v-show="list.monthlyType=='A5'||list.monthlyType=='A7'">剩余：
							<span v-if="list.monthlyType=='A5'">{{list.num}}小时</span>
							<span v-else-if="list.monthlyType=='A7'">{{list.num}}次</span>
							<span v-else>0</span>
						</view>
					</view>
				</view>
			</view>
			<view class="stwo">
				<view class="stwotap" @click="czbtn">
					<view class="stwoleft">账户充值</view>
					<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//yright.png"></image>
				</view>
				<view class="stwotap" @click="bybtn">
					<view class="stwoleft">购买包月</view>
					<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//yright.png"></image>
				</view>
				<view class="stwotap" @click="dkbtn">
					<view class="stwoleft">电卡管理</view>
					<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//yright.png"></image>
				</view>
				<view class="stwotap" @click="tcbtn">
					<view class="stwoleft">购买停车包月</view>
					<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//yright.png"></image>
				</view>
				<view class="stwotap" @click="czjlbtn">
					<view class="stwoleft">充值记录</view>
					<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//yright.png"></image>
				</view>
				<view class="stwotap" @click="xfjlbtn">
					<view class="stwoleft">消费记录</view>
					<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//yright.png"></image>
				</view>
				<view class="stwotap" @click="tkjlbtn">
					<view class="stwoleft">退款记录</view>
					<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//yright.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		components: {},
		mounted() {
			
		},

		data() {
			return {
				userId:'',//用户ID
				list:{}
			}
		},
		onLoad(options) {
			this.userId=options.id
		},
		onShow(){
			this.show();
		},
		methods: {
			//返回上一页
			blackbtn() {
				uni.navigateBack()
			},
			//跳转修改页面
			xgbtn(){
				uni.navigateTo({
				       url: '/pages/modify_user_information/modify_user_information?id='+this.userId+'&realName='+this.list.realName+'&phone='+this.list.phone,
				});
			},
			//获取用户信息
			show(){
				this.$base.request('user/info'+'/'+this.userId, 'GET')
					.then(res => {
						this.list=res.data.data
						this.list.id=this.pad(this.list.id,8)
					})
					.catch(err => {
				
					})
			},
			//跳转账户充值
			czbtn(){
				uni.navigateTo({
				       url: '/pages/admin_account_recharge/admin_account_recharge?id='+this.userId
				});
			},
			//跳转购买包月
			bybtn(){
				uni.navigateTo({
				       url: '/pages/monthly_purchase/monthly_purchase?id='+this.userId
				});
			},
			//跳转电卡管理
			dkbtn(){
				uni.navigateTo({
				       url: '/pages/electric_card_binding/electric_card_binding?id='+this.userId
				});
			},
			//跳转充值记录
			czjlbtn(){
				uni.navigateTo({
				       url: '/pages/user_recharge_record/user_recharge_record?id='+this.userId
				});
			},
			//跳转消费记录
			xfjlbtn(){
				uni.navigateTo({
				       url: '/pages/user_records_consumption/user_records_consumption?id='+this.userId
				});
			},
			//跳转退款记录
			tkjlbtn(){
				uni.navigateTo({
				       url: '/pages/user_refund_details/user_refund_details?id='+this.userId
				});
			},
			//跳转购买停车包月
			tcbtn(){
				uni.navigateTo({
				       url: '/pages/stopcar_purchase/stopcar_purchase?id='+this.userId
				});
			},
			pad(num, n) {
			  var len = num.toString().length;
			  while(len < n) {
			    num = "0" + num;
			    len++;
			  }
			  return num;
			}
			
			
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		overflow-x: hidden;
		.hand{
			width: 100%;
			background-color: #4B98ED;
			height: 62upx;
			font-size: 30upx;
			font-family: PingFang SC Bold, PingFang SC Bold-Bold;
			font-weight: 700;
			text-align: center;
			line-height: 62upx;
			color: #ffffff;
			position: relative;
			image{
				width:22upx;
				height: 39upx;
				position: absolute;
				left: 31upx;
				top: 11upx;
			}
		}
		.show{
			width: 100%;
			box-sizing: border-box;
			.sone{
				width: 100%;
				height: 164upx;
				background-color: #4B98ED;
				position: relative;
				margin-bottom: 116upx;
				.sonetap{
					width: 683upx;
					// height: 219upx;
					padding-bottom: 15upx;
					border-radius: 16upx;
					box-shadow: -1upx 5upx 10upx 0upx rgba(22,22,22,0.27); 
					position: absolute;
					background-color: #FFFFFF;
					top: 43upx;
					left: 50%;
					margin-left: -341.5upx;
					.stapone{
						width: 100%;
						box-sizing: border-box;
						padding: 26upx;
						position: relative;
						.staponeleft{
							font-size: 32upx;
							font-family: PingFang SC Medium, PingFang SC Medium-Medium;
							font-weight: 500;
							color: #333333;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							width: 87%;
						}
						.staponeright{
							width: 101upx;
							height: 50upx;
							border-radius: 25upx 0upx 0upx 25upx;
							text-align: center;
							background-color: #4B98ED;
							position: absolute;
							bottom: 0upx;
							right: 0upx;
							box-sizing: border-box;
							padding-top: 7upx;
							padding-left: 17upx;
							image{
								width: 37upx;
								height: 36upx;
							}
						}
					}
				}
				.staptwo{
					width: 100%;
					box-sizing: border-box;
					padding-left: 27upx;
					padding-bottom: 5upx;
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #333333;
					display: flex;
					.staptwoleft {
						width: 50%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.staptworight {
						width: 50%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}
			.stwo{
				width: 100%;
				box-sizing: border-box;
				padding: 0 32upx;
				.stwotap{
					width: 100%;
					box-sizing: border-box;
					border-bottom: 1upx solid #e8e8e8;
					padding:26upx 0;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.stwoleft{
						font-size: 28upx;
						font-family: PingFang SC Medium, PingFang SC Medium-Medium;
						font-weight: 500;
						color: #333333;
					}
					image{
						width: 14upx;
						height: 22upx;
					}
				}
			}
		}
		
	}
</style>
